<template>
  <div class="app-container vip">
    <div class="cardBox">
      <div style="display: flex" :gutter="10">
        <div style="flex: 1">
          <el-button
            @click="gobackWay"
            type="text"
            icon="el-icon-arrow-left"
            style="color: rgba(0, 0, 0, 0.85)"
            >返回</el-button
          >
          <el-divider direction="vertical"></el-divider>
          <span>{{ id ? "修改会员卡" : "添加会员卡" }}</span>
        </div>
      </div>
    </div>
    <div
      class="cardBox"
      v-loading="loading"
      style="height: calc(85vh - 80px); margin-top: 20px; position: relative"
    >
      <div style="height: calc(77vh - 80px)">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="会员卡信息" name="会员卡信息">
            <el-scrollbar
              wrap-style="overflow-x:hidden;"
              style="height: calc(70vh - 80px)"
            >
              <el-form
                :model="basicForm"
                :rules="basicRules"
                ref="basicForm"
                label-width="120px"
                class="demo-ruleForm"
              >
                <el-row>
                  <el-col :span="24">
                    <el-col :span="10" style="min-width: 650px">
                      <el-form-item label="会员卡名称" prop="card_name">
                        <el-input
                          v-model.trim="basicForm.card_name"
                          maxlength="8"
                          clearable
                          show-word-limit
                          placeholder="请输入会员卡名称"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-col>
                  <el-col :span="24">
                    <el-col :span="4" style="min-width: 272.16px">
                      <el-form-item label="会员图片" prop="image">
                        <logo-upload
                          :single-file="imageFile"
                          :show-file-list="false"
                          accept="image/jpeg, image/png"
                          @uploadCallback="imageCallback"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" style="min-width: 377.84px">
                      <el-form-item label="会员卡颜色" prop="card_colour">
                        <div style="display: flex">
                          <div style="flex: 1">
                            <el-input
                              v-model.trim="basicForm.card_colour"
                              maxlength="18"
                              clearable
                              show-word-limit
                              placeholder="请输入会员卡颜色"
                            >
                              <template slot="append">
                                <el-popover
                                  placement="top-start"
                                  trigger="hover"
                                >
                                  <p style="font-size: 12px">
                                    会员卡的颜色,可以为英文和RGB色值
                                  </p>
                                  <p style="font-size: 12px">
                                    例:'red'和'#000000'
                                  </p>
                                  <el-button
                                    slot="reference"
                                    icon="el-icon-info"
                                  ></el-button>
                                </el-popover>
                                <el-popover placement="right" trigger="click">
                                  <div>
                                    <sketch-picker v-model="card_colour" />
                                  </div>
                                  <el-button
                                    slot="reference"
                                    style="
                                      border-left: 1px solid #dcdfe6;
                                      margin-left: 20px;
                                    "
                                    icon="el-icon-edit"
                                  ></el-button>
                                </el-popover>
                              </template>
                            </el-input>
                          </div>
                          <div></div>
                        </div>
                      </el-form-item>
                      <el-form-item label="会员卡文字颜色" prop="font_colour">
                        <el-input
                          v-model.trim="basicForm.font_colour"
                          maxlength="18"
                          clearable
                          show-word-limit
                          placeholder="请输入会员卡文字颜色"
                        >
                          <template slot="append">
                            <el-popover placement="top-start" trigger="hover">
                              <p style="font-size: 12px">
                                会员卡的颜色,可以为英文和RGB色值
                              </p>
                              <p style="font-size: 12px">例:'red'和'#000000'</p>
                              <el-button
                                slot="reference"
                                icon="el-icon-info"
                              ></el-button>
                            </el-popover>
                            <el-popover placement="right" trigger="click">
                              <div>
                                <sketch-picker v-model="font_colour" />
                              </div>
                              <el-button
                                slot="reference"
                                style="
                                  border-left: 1px solid #dcdfe6;
                                  margin-left: 20px;
                                "
                                icon="el-icon-edit"
                              ></el-button>
                            </el-popover>
                          </template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-col>
                  <el-col :span="24">
                    <el-col :span="10" style="min-width: 650px" size="mini">
                      <el-form-item label="会员卡类型" prop="cardType">
                        <el-checkbox-group
                          @change="cardTypeWay"
                          v-model="cardType"
                          size="small"
                        >
                          <el-checkbox
                            v-for="(item, index) in cardTypeList"
                            :key="index"
                            :label="item.id"
                            border
                            >{{ item.label }}</el-checkbox
                          >
                        </el-checkbox-group>
                      </el-form-item>
                    </el-col>
                  </el-col>

                  <el-col :span="24">
                    <el-col :span="10" style="min-width: 650px">
                      <el-form-item label="折扣限制类型" prop="goods_type">
                        <el-radio-group
                          @change="goods_typeWay"
                          v-model="basicForm.goods_type"
                        >
                          <el-radio :label="1">全平台商品</el-radio>
                          <el-radio :label="2">平台自营商品</el-radio>
                          <el-radio :label="3">指定店铺</el-radio>
                          <el-radio :label="4">指定商品</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                  </el-col>
                  <el-col :span="24">
                    <el-col :span="10" style="min-width: 650px">
                      <el-form-item label="折扣比例" prop="discount_rate">
                        <el-input
                          v-model.trim="basicForm.discount_rate"
                          maxlength="3"
                          clearable
                          placeholder="请输入折扣比例"
                        >
                          <span slot="append">%</span>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-col>
                  <el-col :span="24" v-if="basicForm.goods_type == 3">
                    <el-col :span="23">
                      <el-form-item label="指定店铺" prop="relevancy_id">
                        <el-table
                          v-if="shopIds.length !== 0"
                          :data="shopIds"
                          height="350"
                          border
                          style="width: 100%"
                        >
                          <el-table-column
                            align="center"
                            prop="name"
                            label="商户名称"
                          >
                            <template slot-scope="scope">
                              {{ scope.row.name ? scope.row.name : "-" }}
                            </template>
                          </el-table-column>
                          <el-table-column
                            align="center"
                            prop="user_cellphone"
                            label="手机号"
                          >
                          </el-table-column>
                          <el-table-column
                            align="center"
                            prop="user_name"
                            label="用户名字"
                          >
                          </el-table-column>
                          <el-table-column align="center" label="商户类型">
                            <template slot-scope="scope">
                              <el-tag size="mini">{{
                                scope.row.merchant_category
                                  ? scope.row.merchant_category.name
                                  : "-"
                              }}</el-tag>
                            </template>
                          </el-table-column>
                          <el-table-column
                            align="center"
                            prop="source_from"
                            label="商户来源"
                          >
                            <template slot-scope="scope">
                              <el-tag
                                v-if="scope.row.source_from == 1"
                                size="mini"
                                >自主申请</el-tag
                              >
                              <el-tag
                                v-else-if="scope.row.source_from == 2"
                                size="mini"
                                type="danger"
                                >后台创建</el-tag
                              >
                              <span v-else>-</span>
                            </template>
                          </el-table-column>
                          <el-table-column
                            align="center"
                            prop="grade"
                            label="地址"
                          >
                            <template slot-scope="scope">
                              {{
                                scope.row.province_name
                                  ? scope.row.province_name
                                  : "-" + scope.row.city_name
                                  ? scope.row.city_name
                                  : "-" + scope.row.county_name
                                  ? scope.row.county_name
                                  : "-"
                              }}
                            </template>
                          </el-table-column>
                          <el-table-column
                            align="center"
                            prop="is_collection"
                            label="是否缴纳保证金"
                          >
                            <template slot-scope="scope">
                              <el-tag
                                v-if="scope.row.is_collection == 1"
                                size="mini"
                                >已缴纳</el-tag
                              >
                              <el-tag v-else size="mini" type="danger"
                                >未缴纳</el-tag
                              >
                            </template>
                          </el-table-column>
                          <el-table-column
                            align="center"
                            fixed="right"
                            label="操作"
                          >
                            <template slot-scope="scope">
                              <el-button
                                size="mini"
                                type="danger"
                                @click="delMerchantWay(scope.row)"
                                >移除</el-button
                              >
                            </template>
                          </el-table-column>
                        </el-table>
                        <el-button
                          @click="saveMerchant"
                          type="primary"
                          size="mini"
                          >添加店铺</el-button
                        >
                      </el-form-item>
                    </el-col>
                  </el-col>
                  <el-col :span="24" v-if="basicForm.goods_type == 4">
                    <el-col :span="23">
                      <el-form-item label="指定商品" prop="relevancy_id">
                        <el-table
                          v-if="goodsIds.length !== 0"
                          :data="goodsIds"
                          height="350"
                          border
                          style="width: 100%"
                        >
                          <el-table-column
                            align="center"
                            prop="name"
                            label="商品名称"
                          >
                            <template slot-scope="scope">
                              {{ scope.row.name ? scope.row.name : "-" }}
                            </template>
                          </el-table-column>
                          <el-table-column
                            align="center"
                            prop="mer_name"
                            label="所属商铺"
                          >
                            <template slot-scope="scope">
                              {{
                                scope.row.mer_name ? scope.row.mer_name : "-"
                              }}
                            </template>
                          </el-table-column>
                          <el-table-column
                            align="center"
                            prop="main_image"
                            label="商品主图"
                          >
                            <template slot-scope="scope">
                              <el-image
                                style="width: 50px"
                                :src="
                                  scope.row.main_image
                                    ? scope.row.main_image
                                    : scope.row.image
                                "
                              />
                            </template>
                          </el-table-column>
                          <el-table-column
                            align="center"
                            prop="thumbnail"
                            label="缩略图"
                          >
                            <template slot-scope="scope">
                              <el-image
                                style="width: 50px"
                                v-if="scope.row.thumbnail"
                                :src="scope.row.thumbnail"
                              />
                            </template>
                          </el-table-column>
                          <el-table-column
                            align="center"
                            prop="type"
                            label="商品类型"
                          >
                            <template slot-scope="scope">
                              <el-tag v-if="scope.row.mer_id == 0" size="mini"
                                >平台商品</el-tag
                              >
                              <el-tag
                                v-else-if="
                                  scope.row.mer_id && scope.row.mer_id !== 0
                                "
                                size="mini"
                              >
                                商户商品</el-tag
                              >
                              <span v-else>-</span>
                            </template>
                          </el-table-column>

                          <el-table-column align="center" label="库存">
                            <template slot-scope="scope">
                              <span>{{
                                scope.row.product
                                  ? scope.row.product[0].inventory
                                  : ""
                              }}</span>
                            </template>
                          </el-table-column>

                          <el-table-column
                            align="center"
                            prop="status"
                            label="上下架"
                          >
                            <template slot-scope="scope">
                              <el-tag v-if="scope.row.status == 1" size="mini"
                                >已上架</el-tag
                              >
                              <el-tag
                                type="danger"
                                v-if="scope.row.status == 0"
                                size="mini"
                                >已下架</el-tag
                              >
                            </template>
                          </el-table-column>
                          <el-table-column
                            align="center"
                            fixed="right"
                            label="操作"
                          >
                            <template slot-scope="scope">
                              <el-button
                                size="mini"
                                type="danger"
                                @click="delGoodsWay(scope.row)"
                                >移除</el-button
                              >
                            </template>
                          </el-table-column>
                        </el-table>
                        <el-button @click="saveGoods" type="primary" size="mini"
                          >添加商品</el-button
                        >
                      </el-form-item>
                    </el-col>
                  </el-col>
                  <el-col :span="24">
                    <el-col :span="10">
                      <el-form-item label="是否包邮" prop="is_pinkage">
                        <el-radio-group v-model="basicForm.is_pinkage">
                          <el-radio :label="0">不包邮</el-radio>
                          <el-radio :label="1">包邮</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                  </el-col>
                  <el-col :span="24">
                    <el-col :span="10" style="min-width: 650px">
                      <el-form-item label="排序" prop="sort">
                        <el-input
                          @focus="Focus(basicForm, 'sort')"
                          @blur="Blur(basicForm, 'sort')"
                          v-model.trim="basicForm.sort"
                          maxlength="8"
                          clearable
                          show-word-limit
                          placeholder="请输入排序(值越大越靠前)"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-col>
                  <el-col :span="24">
                    <el-col :span="15" style="min-width: 650px">
                      <el-form-item label="会员卡说明" prop="explain">
                        <!-- <tinymce-editor
                          v-if="contentBool"
                          v-model="basicForm.explain"
                          :height="500"
                        /> -->
                        <editor-text
                          v-model="basicForm.explain"
                          :width="600"
                          :height="240"
                          @input="editorclick"
                        />
                      </el-form-item>
                    </el-col>
                  </el-col>
                </el-row>
              </el-form>
            </el-scrollbar>
          </el-tab-pane>
          <el-tab-pane
            v-if="cardTypeList[0] ? cardTypeList[0].show : ''"
            :label="cardTypeList[0] ? cardTypeList[0].label : ''"
            :name="cardTypeList[0] ? cardTypeList[0].label : ''"
          >
            <el-form
              :model="dayFrom"
              :rules="cardRules"
              ref="dayFrom"
              label-width="110px"
              class="demo-ruleForm"
            >
              <el-row>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="售价" prop="card_price">
                      <el-input
                        v-model.trim="dayFrom.card_price"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入会员卡售价"
                      >
                        <template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">当前会员卡的售卖价格</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="价值" prop="line_price">
                      <el-input
                        v-model.trim="dayFrom.line_price"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入会员卡价值"
                      >
                        <template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">当前会员卡价值多少</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="是否启用" prop="card_status">
                      <el-radio-group v-model="dayFrom.card_status">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="2">不启用</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="送余额" prop="send_balance">
                      <el-input
                        @focus="Focus(dayFrom, 'send_balance')"
                        @blur="Blur(dayFrom, 'send_balance')"
                        v-model.trim="dayFrom.send_balance"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入送余额"
                      >
                        <template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">
                              购买当前会员卡赠送多少余额
                            </p>
                            <p style="font-size: 12px">默认为0,则不赠送</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="送积分" prop="send_integral">
                      <el-input
                        @focus="Focus(dayFrom, 'send_integral')"
                        @blur="Blur(dayFrom, 'send_integral')"
                        v-model.trim="dayFrom.send_integral"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入送积分"
                      >
                        <template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">
                              购买当前会员卡赠送多少积分
                            </p>
                            <p style="font-size: 12px">默认为0,则不赠送</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="送提货劵" prop="send_coupon_summary">
                      <el-input
                        @focus="Focus(dayFrom, 'send_coupon_summary')"
                        @blur="Blur(dayFrom, 'send_coupon_summary')"
                        v-model.trim="dayFrom.send_coupon_summary"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入送提货劵"
                      >
                        <template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">
                              购买当前会员卡赠送多少提货券
                            </p>
                            <p style="font-size: 12px">默认为0,则不赠送</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="送抽奖次数" prop="send_award_num">
                      <el-input
                        @focus="Focus(dayFrom, 'send_award_num')"
                        @blur="Blur(dayFrom, 'send_award_num')"
                        v-model.trim="dayFrom.send_award_num"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入送抽奖次数"
                      >
                        <template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">
                              购买当前会员卡赠送多少抽奖次数
                            </p>
                            <p style="font-size: 12px">默认为0,则不赠送</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane
            v-if="cardTypeList[1] ? cardTypeList[1].show : ''"
            :label="cardTypeList[1] ? cardTypeList[1].label : ''"
            :name="cardTypeList[1] ? cardTypeList[1].label : ''"
          >
            <el-form
              :model="weekFrom"
              :rules="cardRules"
              ref="weekFrom"
              label-width="110px"
              class="demo-ruleForm"
            >
              <el-row>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="售价" prop="card_price">
                      <el-input
                        v-model.trim="weekFrom.card_price"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入会员卡售价"
                      >
                        <template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">当前会员卡的售卖价格</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="价值" prop="line_price">
                      <el-input
                        v-model.trim="weekFrom.line_price"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入会员卡价值"
                      >
                        <template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">当前会员卡价值多少</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="是否启用" prop="card_status">
                      <el-radio-group v-model="weekFrom.card_status">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="2">不启用</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="送余额" prop="send_balance">
                      <el-input
                        @focus="Focus(weekFrom, 'send_balance')"
                        @blur="Blur(weekFrom, 'send_balance')"
                        v-model.trim="weekFrom.send_balance"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入送余额"
                      >
                        <template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">
                              购买当前会员卡赠送多少余额
                            </p>
                            <p style="font-size: 12px">默认为0,则不赠送</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="送积分" prop="send_integral">
                      <el-input
                        @focus="Focus(weekFrom, 'send_integral')"
                        @blur="Blur(weekFrom, 'send_integral')"
                        v-model.trim="weekFrom.send_integral"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入送积分"
                        ><template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">
                              购买当前会员卡赠送多少积分
                            </p>
                            <p style="font-size: 12px">默认为0,则不赠送</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="送提货劵" prop="send_coupon_summary">
                      <el-input
                        @focus="Focus(weekFrom, 'send_coupon_summary')"
                        @blur="Blur(weekFrom, 'send_coupon_summary')"
                        v-model.trim="weekFrom.send_coupon_summary"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入送提货劵"
                      >
                        <template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">
                              购买当前会员卡赠送多少提货券
                            </p>
                            <p style="font-size: 12px">默认为0,则不赠送</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="送抽奖次数" prop="send_award_num">
                      <el-input
                        @focus="Focus(weekFrom, 'send_award_num')"
                        @blur="Blur(weekFrom, 'send_award_num')"
                        v-model.trim="weekFrom.send_award_num"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入送抽奖次数"
                      >
                        <template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">
                              购买当前会员卡赠送多少抽奖次数
                            </p>
                            <p style="font-size: 12px">默认为0,则不赠送</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane
            v-if="cardTypeList[2] ? cardTypeList[2].show : ''"
            :label="cardTypeList[2] ? cardTypeList[2].label : ''"
            :name="cardTypeList[2] ? cardTypeList[2].label : ''"
          >
            <el-form
              :model="monthFrom"
              :rules="cardRules"
              ref="monthFrom"
              label-width="110px"
              class="demo-ruleForm"
            >
              <el-row>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="售价" prop="card_price">
                      <el-input
                        v-model.trim="monthFrom.card_price"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入会员卡售价"
                        ><template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">当前会员卡的售卖价格</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="价值" prop="line_price">
                      <el-input
                        v-model.trim="monthFrom.line_price"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入会员卡价值"
                        ><template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">当前会员卡价值多少</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="是否启用" prop="card_status">
                      <el-radio-group v-model="monthFrom.card_status">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="2">不启用</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="送余额" prop="send_balance">
                      <el-input
                        @focus="Focus(monthFrom, 'send_balance')"
                        @blur="Blur(monthFrom, 'send_balance')"
                        v-model.trim="monthFrom.send_balance"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入送余额"
                        ><template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">
                              购买当前会员卡赠送多少余额
                            </p>
                            <p style="font-size: 12px">默认为0,则不赠送</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="送积分" prop="send_integral">
                      <el-input
                        @focus="Focus(monthFrom, 'send_integral')"
                        @blur="Blur(monthFrom, 'send_integral')"
                        v-model.trim="monthFrom.send_integral"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入送积分"
                      >
                        <template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">
                              购买当前会员卡赠送多少积分
                            </p>
                            <p style="font-size: 12px">默认为0,则不赠送</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="送提货劵" prop="send_coupon_summary">
                      <el-input
                        @focus="Focus(monthFrom, 'send_coupon_summary')"
                        @blur="Blur(monthFrom, 'send_coupon_summary')"
                        v-model.trim="monthFrom.send_coupon_summary"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入送提货劵"
                      >
                        <template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">
                              购买当前会员卡赠送多少提货券
                            </p>
                            <p style="font-size: 12px">默认为0,则不赠送</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="送抽奖次数" prop="send_award_num">
                      <el-input
                        @focus="Focus(monthFrom, 'send_award_num')"
                        @blur="Blur(monthFrom, 'send_award_num')"
                        v-model.trim="monthFrom.send_award_num"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入送抽奖次数"
                      >
                        <template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">
                              购买当前会员卡赠送多少抽奖次数
                            </p>
                            <p style="font-size: 12px">默认为0,则不赠送</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane
            v-if="cardTypeList[3] ? cardTypeList[3].show : ''"
            :label="cardTypeList[3] ? cardTypeList[3].label : ''"
            :name="cardTypeList[3] ? cardTypeList[3].label : ''"
          >
            <el-form
              :model="seasonFrom"
              :rules="cardRules"
              ref="seasonFrom"
              label-width="110px"
              class="demo-ruleForm"
            >
              <el-row>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="售价" prop="card_price">
                      <el-input
                        v-model.trim="seasonFrom.card_price"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入会员卡售价"
                        ><template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">当前会员卡的售卖价格</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="价值" prop="line_price">
                      <el-input
                        v-model.trim="seasonFrom.line_price"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入会员卡价值"
                        ><template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">当前会员卡价值多少</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="是否启用" prop="card_status">
                      <el-radio-group v-model="seasonFrom.card_status">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="2">不启用</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="送余额" prop="send_balance">
                      <el-input
                        @focus="Focus(seasonFrom, 'send_balance')"
                        @blur="Blur(seasonFrom, 'send_balance')"
                        v-model.trim="seasonFrom.send_balance"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入送余额"
                        ><template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">
                              购买当前会员卡赠送多少余额
                            </p>
                            <p style="font-size: 12px">默认为0,则不赠送</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="送积分" prop="send_integral">
                      <el-input
                        @focus="Focus(seasonFrom, 'send_integral')"
                        @blur="Blur(seasonFrom, 'send_integral')"
                        v-model.trim="seasonFrom.send_integral"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入送积分"
                      >
                        <template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">
                              购买当前会员卡赠送多少积分
                            </p>
                            <p style="font-size: 12px">默认为0,则不赠送</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="送提货劵" prop="send_coupon_summary">
                      <el-input
                        @focus="Focus(seasonFrom, 'send_coupon_summary')"
                        @blur="Blur(seasonFrom, 'send_coupon_summary')"
                        v-model.trim="seasonFrom.send_coupon_summary"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入送提货劵"
                      >
                        <template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">
                              购买当前会员卡赠送多少提货券
                            </p>
                            <p style="font-size: 12px">默认为0,则不赠送</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="送抽奖次数" prop="send_award_num">
                      <el-input
                        @focus="Focus(seasonFrom, 'send_award_num')"
                        @blur="Blur(seasonFrom, 'send_award_num')"
                        v-model.trim="seasonFrom.send_award_num"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入送抽奖次数"
                      >
                        <template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">
                              购买当前会员卡赠送多少抽奖次数
                            </p>
                            <p style="font-size: 12px">默认为0,则不赠送</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane
            v-if="cardTypeList[4] ? cardTypeList[4].show : ''"
            :label="cardTypeList[4] ? cardTypeList[4].label : ''"
            :name="cardTypeList[4] ? cardTypeList[4].label : ''"
          >
            <el-form
              :model="yearFrom"
              :rules="cardRules"
              ref="yearFrom"
              label-width="110px"
              class="demo-ruleForm"
            >
              <el-row>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="售价" prop="card_price">
                      <el-input
                        v-model.trim="yearFrom.card_price"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入会员卡售价"
                        ><template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">当前会员卡的售卖价格</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="价值" prop="line_price">
                      <el-input
                        v-model.trim="yearFrom.line_price"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入会员卡价值"
                        ><template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">当前会员卡价值多少</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="是否启用" prop="card_status">
                      <el-radio-group v-model="yearFrom.card_status">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="2">不启用</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="送余额" prop="send_balance">
                      <el-input
                        @focus="Focus(yearFrom, 'send_balance')"
                        @blur="Blur(yearFrom, 'send_balance')"
                        v-model.trim="yearFrom.send_balance"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入送余额"
                        ><template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">
                              购买当前会员卡赠送多少余额
                            </p>
                            <p style="font-size: 12px">默认为0,则不赠送</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="送积分" prop="send_integral">
                      <el-input
                        @focus="Focus(yearFrom, 'send_integral')"
                        @blur="Blur(yearFrom, 'send_integral')"
                        v-model.trim="yearFrom.send_integral"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入送积分"
                      >
                        <template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">
                              购买当前会员卡赠送多少积分
                            </p>
                            <p style="font-size: 12px">默认为0,则不赠送</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="送提货劵" prop="send_coupon_summary">
                      <el-input
                        @focus="Focus(yearFrom, 'send_coupon_summary')"
                        @blur="Blur(yearFrom, 'send_coupon_summary')"
                        v-model.trim="yearFrom.send_coupon_summary"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入送提货劵"
                      >
                        <template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">
                              购买当前会员卡赠送多少提货券
                            </p>
                            <p style="font-size: 12px">默认为0,则不赠送</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="10" style="min-width: 650px">
                    <el-form-item label="送抽奖次数" prop="send_award_num">
                      <el-input
                        @focus="Focus(yearFrom, 'send_award_num')"
                        @blur="Blur(yearFrom, 'send_award_num')"
                        v-model.trim="yearFrom.send_award_num"
                        maxlength="8"
                        clearable
                        show-word-limit
                        placeholder="请输入送抽奖次数"
                      >
                        <template slot="append">
                          <el-popover placement="top-start" trigger="hover">
                            <p style="font-size: 12px">
                              购买当前会员卡赠送多少抽奖次数
                            </p>
                            <p style="font-size: 12px">默认为0,则不赠送</p>
                            <el-button
                              slot="reference"
                              icon="el-icon-info"
                            ></el-button>
                          </el-popover> </template
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div style="text-align: right">
        <el-button
          type="primary"
          @click="BackWay"
          v-if="activeName !== '会员卡信息'"
          >上一步</el-button
        >
        <el-button type="primary" v-if="!submitBtnShow" @click="nextWtepWay"
          >下一步</el-button
        >
        <el-button
          @click="submitBtnWay"
          type="primary"
          v-if="activeName !== '会员卡信息' && submitBtnShow"
          >提交</el-button
        >
      </div>
    </div>

    <el-dialog
      title="选择店铺"
      :visible.sync="merchantDialog"
      width="1100px"
      top="10vh"
      :close-on-click-modal="false"
      :before-close="merchantBeforeClose"
    >
      <el-row style="position: relative" v-loading="merchantLoading">
        <el-col :span="24">
          <el-form :inline="true" class="search-form">
            <el-row style="display: flex; flex-wrap: wrap">
              <el-col :span="19">
                <el-form-item label="名称：">
                  <el-input
                    :maxlength="20"
                    v-model="merchantSearch.name"
                    class="marginBottom"
                    placeholder="请输入商户名称"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="分类：">
                  <el-select
                    clearable
                    v-model="merchantSearch.mer_cate_id"
                    placeholder="请选择分类"
                  >
                    <el-option
                      v-for="item in CateList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" style="margin: 5px 0; text-align: right">
                <el-form-item>
                  <el-button
                    size="small"
                    type="primary"
                    icon="el-icon-search"
                    @click="getMerchantListWay"
                    >查询</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
        <el-col>
          <el-table
            ref="getUnselectedRowKeys"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            :row-key="getUnselectedRowKeys"
            :data="merchantList"
          >
            <el-table-column align="center" prop="name" label="商户名称">
            </el-table-column>
            <el-table-column
              align="center"
              prop="user_cellphone"
              label="手机号"
            >
            </el-table-column>
            <el-table-column align="center" prop="user_name" label="用户名字">
            </el-table-column>
            <el-table-column align="center" label="商户类型">
              <template slot-scope="scope">
                <el-tag size="mini">{{
                  scope.row.merchant_category.name
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="source_from" label="商户来源">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.source_from == 1" size="mini"
                  >自主申请</el-tag
                >
                <el-tag
                  v-if="scope.row.source_from == 2"
                  size="mini"
                  type="danger"
                  >后台创建</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column align="center" prop="grade" label="地址">
              <template slot-scope="scope">
                {{
                  scope.row.province_name +
                  scope.row.city_name +
                  scope.row.county_name
                }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="is_collection"
              label="是否缴纳保证金"
            >
              <template slot-scope="scope">
                <el-tag v-if="scope.row.is_collection == 1" size="mini"
                  >已缴纳</el-tag
                >
                <el-tag v-else size="mini" type="danger">未缴纳</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              type="selection"
              :reserve-selection="true"
              width="55"
            >
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-row :gutter="20" style="padding: 0px 0">
          <el-col :span="12">
            <pagination
              v-show="merchantTotal > 0"
              :total="merchantTotal"
              :page.sync="merchantSearch.page"
              :limit.sync="merchantSearch.count"
              @pagination="getMerchantListWay"
            />
          </el-col>
          <el-col :span="12" style="padding-top: 20px">
            <el-button
              :loading="merchantLoading"
              type="primary"
              @click="merchantsSubmit"
              >确 定</el-button
            >
          </el-col>
        </el-row>
      </span>
    </el-dialog>

    <el-dialog
      title="选择商品"
      :visible.sync="goodsDialog"
      width="1100px"
      top="10vh"
      :close-on-click-modal="false"
      :before-close="goodsBeforeClose"
    >
      <el-row style="position: relative" v-loading="goodsLoading">
        <el-col :span="24">
          <el-form :inline="true" class="search-form">
            <el-row style="display: flex; flex-wrap: wrap">
              <div style="flex: 1">
                <el-form-item label="关键字">
                  <el-input
                    :maxlength="20"
                    v-model="goodsSearch.keywords"
                    class="marginBottom"
                    placeholder="关键字查询支持商品名、ID、副标题、编码"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="供应商">
                  <el-select
                    v-model="goodsSearch.supplier_id"
                    placeholder="请选择供应商"
                    clearable
                  >
                    <el-option
                      v-for="(item, index) in supplierList"
                      :key="index"
                      :label="item.supplier_name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="用户标签">
                  <el-select
                    v-model="goodsSearch.label_id"
                    multiple
                    placeholder="请选择标签"
                    clearable
                  >
                    <el-option-group
                      v-for="group in labelList"
                      :key="group.label"
                      :label="group.category_name"
                    >
                      <el-option
                        v-for="item in group.child"
                        :key="item.id"
                        :label="item.tag_name"
                        :value="item.id"
                      />
                    </el-option-group>
                  </el-select>
                </el-form-item>
              </div>
              <div style="margin: 5px 0; text-align: right">
                <el-form-item>
                  <el-button
                    size="small"
                    type="primary"
                    icon="el-icon-search"
                    @click="getGoodsListWay"
                    >查询</el-button
                  >
                </el-form-item>
              </div>
            </el-row>
          </el-form>
        </el-col>
        <el-col>
          <el-table
            ref="GoodsUnselectedRowKeys"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            style="width: 100%"
            @selection-change="goodsSelectionChange"
            :row-key="getUnselectedRowKeys"
            :data="goodsList"
          >
            <el-table-column align="center" prop="name" label="商品名称">
              <template slot-scope="scope">
                {{ scope.row.name ? scope.row.name : "-" }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="mer_name" label="所属商铺">
              <template slot-scope="scope">
                {{ scope.row.mer_name ? scope.row.mer_name : "-" }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="main_image" label="商品主图">
              <template slot-scope="scope">
                <el-image
                  style="width: 50px"
                  v-if="scope.row.main_image"
                  :src="scope.row.main_image"
                />
              </template>
            </el-table-column>
            <el-table-column align="center" prop="thumbnail" label="缩略图">
              <template slot-scope="scope">
                <el-image
                  style="width: 50px"
                  v-if="scope.row.thumbnail"
                  :src="scope.row.thumbnail"
                />
              </template>
            </el-table-column>
            <el-table-column align="center" prop="type" label="商品类型">
              <template slot-scope="scope">
                {{ scope.row.tag_name }}
                <el-tag v-if="scope.row.mer_id == 0" size="mini"
                  >平台商品</el-tag
                >
                <el-tag v-else size="mini"> 商户商品</el-tag>
              </template>
            </el-table-column>

            <el-table-column align="center" label="库存">
              <template slot-scope="scope">
                <span>{{
                  scope.row.product[0] ? scope.row.product[0].inventory : ""
                }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" prop="status" label="上下架">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == 1" size="mini">已上架</el-tag>
                <el-tag type="danger" v-if="scope.row.status == 0" size="mini"
                  >已下架</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              type="selection"
              :reserve-selection="true"
              width="55"
            >
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-row :gutter="20" style="padding: 0px 0">
          <el-col :span="12">
            <pagination
              v-show="goodsTotal > 0"
              :total="goodsTotal"
              :page.sync="goodsSearch.page"
              :limit.sync="goodsSearch.count"
              @pagination="getGoodsListWay"
            />
          </el-col>
          <el-col :span="12" style="padding-top: 20px">
            <el-button
              :loading="goodsLoading"
              type="primary"
              @click="goodsSubmit"
              >确 定</el-button
            >
          </el-col>
        </el-row>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import LogoUpload from "@/components/FileUpload";

import { getGoodsList } from "@/api/commodity/index";
import { getTagCategoryAll } from "@/api/user/index";
import { getMerchantList, getCateList } from "@/api/merchant/index";
import { getsupplierAll } from "@/api/supplier/index";
import { SaveClubCard, getClubCardInfo } from "@/api/finance/index";

import { Sketch } from "vue-color";

export default {
  components: {
    LogoUpload,
    "sketch-picker": Sketch,
  },
  watch: {
    card_colour(o, n) {
      this.basicForm.card_colour = o.hex8;
    },
    font_colour(o, n) {
      this.basicForm.font_colour = o.hex8;
    },
  },
  data() {
    return {
      card_colour: "",
      font_colour: "",
      id: "",
      backupsForm: {},
      loading: true,
      contentBool: false,
      activeName: "会员卡信息",
      basicForm: {
        card_name: "",
        id: "",
        card_colour: "",
        explain: "",
        discount_rate: "",
        goods_type: 1,
        relevancy_id: "",
        image: "",
        font_colour: "",
        sort: 0,
        is_pinkage: 1,
      },
      cardType: ["3"],
      cardTypeList: [
        {
          id: "1",
          label: "日卡",
          show: false,
          form: "dayFrom",
        },
        {
          id: "2",
          label: "周卡",
          show: false,
          form: "weekFrom",
        },
        {
          id: "3",
          label: "月卡",
          show: true,
          form: "monthFrom",
        },
        {
          id: "4",
          label: "季卡",
          show: false,
          form: "seasonFrom",
        },
        {
          id: "5",
          label: "年卡",
          show: false,
          form: "yearFrom",
        },
      ],
      imageFile: {},
      shopIds: [], // 店铺列表
      goodsIds: [], // 商品列表
      basicRules: {
        card_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (!value) {
                callback(new Error("请输入会员卡名称"));
              } else {
                if (req.test(value)) {
                  callback(new Error("会员卡名称中不能存在特殊字符"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        image: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.basicForm.image.length == 0) {
                return callback(new Error("请上传轮播图片"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        card_colour: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value == "") {
                return callback(new Error("请上传轮播图片"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        font_colour: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value == "") {
                return callback(new Error("请上传轮播图片"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        cardType: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.cardType.length == 0) {
                return callback(new Error("请至少选择一个会员卡类型"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        discount_rate: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /^\d+(\.\d{1,2})?$/;
              if (value == "") {
                return callback(new Error("请输入折扣比例"));
              } else {
                if (!req.test(value)) {
                  return callback(
                    new Error("折扣比例只能为数字,且最多保留两位小数")
                  );
                } else {
                  if (Number(value) > 100 || Number(value) < 0) {
                    return callback(
                      new Error("折扣比例最大不能超过100,最小不能低于0")
                    );
                  }
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        goods_type: [
          {
            required: true,
            validator: (rule, value, callback) => {
              callback();
            },
            trigger: "change",
          },
        ],
        relevancy_id: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.basicForm.goods_type == 3) {
                if (this.shopIds.length == 0) {
                  return callback(new Error("请选择至少一个店铺"));
                } else {
                  callback();
                }
              } else if (this.basicForm.goods_type == 4) {
                if (this.goodsIds.length == 0) {
                  return callback(new Error("请选择至少一个商品"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        is_pinkage: [
          {
            required: true,
            validator: (rule, value, callback) => {
              callback();
            },
            trigger: "change",
          },
        ],
        sort: [
          {
            required: false,
            validator: (rule, value, callback) => {
              const req = /\D/g;
              if (value !== "" && value !== 0) {
                if (req.test(value)) {
                  return callback(new Error("排序只能是整数"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        explain: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value == "") {
                return callback(new Error("请输入会员卡说明"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
      },
      whichIndex: 0,
      submitBtnShow: false,
      dayFrom: {
        card_price: "", //售价
        line_price: "", //价值 可以为空传0
        card_status: 1, //状态：1开启
        send_balance: 0, //送余额 0表示没有
        send_integral: 0, //送积分 0表示没有
        send_coupon_summary: 0, //送提货劵 0表示没有
        send_award_num: 0, //送抽奖次数 0表示没有
        sort: 0, //排序 值越大越靠前} 如果没有传空字符串
      },
      weekFrom: {
        card_price: "", //售价
        line_price: "", //价值 可以为空传0
        card_status: 1, //状态：1开启
        send_balance: 0, //送余额 0表示没有
        send_integral: 0, //送积分 0表示没有
        send_coupon_summary: 0, //送提货劵 0表示没有
        send_award_num: 0, //送抽奖次数 0表示没有
        sort: 0, //排序 值越大越靠前} 如果没有传空字符串
      },
      monthFrom: {
        card_price: "", //售价
        line_price: "", //价值 可以为空传0
        card_status: 1, //状态：1开启
        send_balance: 0, //送余额 0表示没有
        send_integral: 0, //送积分 0表示没有
        send_coupon_summary: 0, //送提货劵 0表示没有
        send_award_num: 0, //送抽奖次数 0表示没有
        sort: 0, //排序 值越大越靠前} 如果没有传空字符串
      },
      seasonFrom: {
        card_price: "", //售价
        line_price: "", //价值 可以为空传0
        card_status: 1, //状态：1开启
        send_balance: 0, //送余额 0表示没有
        send_integral: 0, //送积分 0表示没有
        send_coupon_summary: 0, //送提货劵 0表示没有
        send_award_num: 0, //送抽奖次数 0表示没有
        sort: 0, //排序 值越大越靠前} 如果没有传空字符串
      },
      yearFrom: {
        card_price: "", //售价
        line_price: "", //价值 可以为空传0
        card_status: 1, //状态：1开启
        send_balance: 0, //送余额 0表示没有
        send_integral: 0, //送积分 0表示没有
        send_coupon_summary: 0, //送提货劵 0表示没有
        send_award_num: 0, //送抽奖次数 0表示没有
        sort: 0, //排序 值越大越靠前} 如果没有传空字符串
      },
      cardRules: {
        card_price: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === 0) {
                return callback();
              }
              if (value === "") {
                callback(new Error("请输入会员卡售价"));
              } else {
                let req = /^\d+(\.\d{1,2})?$/;
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("只能为数字,且最多两位小数"));
                }
              }
            },
            trigger: "change",
          },
        ],
        line_price: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === 0) {
                return callback();
              }
              if (value == "") {
                callback(new Error("请输入价值"));
              } else {
                let req = /^\d+(\.\d{1,2})?$/;
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("只能为数字,且最多两位小数"));
                }
              }
            },
            trigger: "change",
          },
        ],
        card_status: [
          {
            required: true,
            validator: (rule, value, callback) => {
              callback();
            },
            trigger: "change",
          },
        ],
        send_balance: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === 0) {
                return callback();
              }
              if (value === "") {
                callback(new Error("请输入赠送余额数量"));
              } else {
                let req = /^\d+(\.\d{1,2})?$/;
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("只能为数字,且最多两位小数"));
                }
              }
            },
            trigger: "change",
          },
        ],
        send_integral: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === 0) {
                return callback();
              }
              if (value === "") {
                callback(new Error("请输入赠送积分数量"));
              } else {
                let req = /^\d+(\.\d{1,2})?$/;
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("只能为数字,且最多两位小数"));
                }
              }
            },
            trigger: "change",
          },
        ],
        send_coupon_summary: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === 0) {
                return callback();
              }
              if (value === "") {
                callback(new Error("请输入赠送提货券数量"));
              } else {
                let req = /^\d+(\.\d{1,2})?$/;
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("只能为数字,且最多两位小数"));
                }
              }
            },
            trigger: "change",
          },
        ],
        send_award_num: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === 0) {
                return callback();
              }
              if (value === "") {
                callback(new Error("请输入赠送抽奖次数"));
              } else {
                let req = /\D/g;
                if (!req.test(value)) {
                  callback();
                } else {
                  callback(new Error("只能为数字,且只能是整数"));
                }
              }
            },
            trigger: "change",
          },
        ],
      },

      merchantDialog: false,
      merchantLoading: false,
      CateList: [],
      merchantSearch: {
        page: 1,
        count: 10,
        name: "",
        user_cellphone: "",
        mer_cate_id: "",
      },
      merchantList: [],
      selectMerchantList: [],
      merchantTotal: 0,

      goodsDialog: false,
      goodsLoading: false,
      labelList: [],
      supplierList: [],
      categoryList: [],
      goodsSearch: {
        page: 1,
        count: 10,
        keywords: "",
        supplier_id: "",
        label_id: "",
        cate_id: "",
        state: "all",
      },
      goodsList: [],
      selectGoodsList: [],
      goodsTotal: 0,
    };
  },
  created() {
    var _this = this;
    const p3 = new Promise((req, rej) => {
      getMerchantList(this.merchantSearch).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          _this.$messages.error(res.msg);
          rej();
          return;
        }
        _this.merchantList = res.data.list;
        _this.merchantTotal = res.data.total;
        req();
      });
    });
    const p2 = new Promise((req, rej) => {
      getGoodsList({ page: 1, count: 10, state: "all" }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          _this.$messages.error(res.msg);
          rej();
          return;
        }
        _this.goodsList = res.data.list;
        _this.goodsTotal = res.data.total;
        req();
      });
    });
    const p4 = new Promise((req, rej) => {
      getCateList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          _this.$messages.error(res.msg);
          rej();
          return;
        }
        this.CateList = res.data.list;
        req();
      });
    });
    const p5 = new Promise((req, rej) => {
      getsupplierAll().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          rej();
          return;
        }
        this.supplierList = res.data;
        req();
      });
    });
    const p6 = new Promise((req, rej) => {
      getTagCategoryAll().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          rej();
          return;
        }
        this.labelList = res.data;
        req();
      });
    });
    var arr = [p2, p3, p4, p5, p6];
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      const p7 = new Promise((req, rej) => {
        getClubCardInfo({ id: this.id }).then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.$messages.error(res.msg);
            rej();
            return;
          }
          this.backupsForm = res.data;
          req();
        });
      });
      arr = [p2, p3, p4, p5, p6, p7];
    }
    Promise.all(arr)
      .then(() => {
        if (this.$route.query.id) {
          _this.getInfoWay();
        } else {
          _this.contentBool = true;
          _this.loading = false;
        }
      })
      .catch(() => {
        _this.loading = false;
      });
  },

  methods: {
    editorclick(e) {
      this.basicForm.explain = e;
    },
    // 返回本地团列表
    gobackWay() {
      this.$router.push("/finance/vipcard");
    },
    // 上传会员卡图片
    imageCallback(file) {
      this.imageFile = file;
      this.basicForm.image = file.url;
    },
    // 选择折扣限制类型
    goods_typeWay(val) {
      console.log(this.basicForm.goods_type);
    },
    // 选择会员类型
    cardTypeWay(val) {
      if (val.length == 0) {
        this.cardTypeList.forEach((item) => {
          item.show = false;
        });
      } else {
        this.cardTypeList.forEach((item) => {
          item.show = false;
          val.forEach((items) => {
            if (item.id == items) {
              item.show = true;
            }
          });
        });
      }
    },
    // tabs切换
    handleClick(val) {
      if (val.name == "会员卡信息") {
        this.whichIndex = 0;
        this.submitBtnShow = false;
        return;
      }
      const arr = []; // 拿出已选中会员卡类型
      this.cardTypeList.forEach((item) => {
        if (item.show) {
          arr.push(item);
        }
      });
      arr.forEach((item, index) => {
        if (item.label == val.name) {
          this.whichIndex = index;
          if (this.whichIndex == arr.length - 1) {
            this.submitBtnShow = true;
          } else {
            this.submitBtnShow = false;
          }
        }
      });
    },
    // 上一步
    BackWay() {
      this.submitBtnShow = false;
      const arr = []; // 拿出已选中会员卡类型
      this.cardTypeList.forEach((item) => {
        if (item.show) {
          arr.push(item);
        }
      });
      this.$nextTick(() => {
        this.whichIndex = this.whichIndex - 1;
        if (this.whichIndex < 0) {
          this.activeName = "会员卡信息";
          this.whichIndex = 0;
        } else {
          this.activeName = arr[this.whichIndex].label;
        }
      });
    },
    // 下一步
    nextWtepWay() {
      const arr = []; // 拿出已选中会员卡类型
      this.cardTypeList.forEach((item) => {
        if (item.show) {
          arr.push(item);
        }
      });
      arr.forEach((item, index) => {
        if (this.activeName == item.label) {
          this.whichIndex = index + 1;
        }
      });
      this.$nextTick(() => {
        if (this.whichIndex == arr.length - 1) {
          this.submitBtnShow = true;
        }
        this.activeName = arr[this.whichIndex].label;
      });
    },
    Focus(item, str) {
      if (item[str] == 0) {
        item[str] = "";
      }
      this.$forceUpdate();
    },
    Blur(item, str) {
      if (item[str] == "") {
        item[str] = 0;
        return;
      }
      if (Number(item[str])) {
        item[str] = Number(item[str]);
      }
      this.$forceUpdate();
    },
    saveMerchant() {
      this.merchantDialog = true;
      const list = this.getSelectionList(this.merchantList, this.shopIds);
      this.$nextTick(() => {
        if (list.length !== 0) {
          list.forEach((item) => {
            this.$refs.getUnselectedRowKeys.toggleRowSelection(item, true);
            this.$forceUpdate();
          });
        }
      });
    },
    getMerchantListWay() {
      this.merchantLoading = true;
      getMerchantList(this.merchantSearch).then((res) => {
        this.merchantLoading = false;
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          return;
        }
        this.merchantList = res.data.list;
        this.merchantTotal = res.data.total;
        const list = this.getSelectionList(this.merchantList, this.shopIds);
        this.$nextTick(() => {
          if (list.length !== 0) {
            list.forEach((item) => {
              this.$refs.getUnselectedRowKeys.toggleRowSelection(item, true);
              this.$forceUpdate();
            });
          }
        });
      });
    },
    // 商户列表每一条的key
    getUnselectedRowKeys(row) {
      return row.id;
    },
    // 商户列表弹框关闭之前执行
    merchantBeforeClose() {
      if (this.selectMerchantList.length !== 0) {
        this.$confirm("当前选择的有店铺, 您可以选择?", "提示", {
          confirmButtonText: "保存数据关闭弹框",
          cancelButtonText: "不保留数据关闭弹框",
          type: "warning",
        })
          .then(() => {
            this.merchantDialog = false;
          })
          .catch(() => {
            this.$refs.getUnselectedRowKeys.clearSelection();
            this.merchantDialog = false;
          });
      } else {
        this.merchantDialog = false;
      }
    },
    // 选择店铺调用
    handleSelectionChange(val) {
      this.selectMerchantList = val;
    },
    // 确定选择的店铺
    merchantsSubmit() {
      if (this.selectMerchantList.length !== 0) {
        this.shopIds = this.selectMerchantList;
        this.$refs.getUnselectedRowKeys.clearSelection();
        this.merchantDialog = false;
      } else {
        this.$confirm("当前没有选择店铺是否关闭", "提示", {
          confirmButtonText: "关闭",
          cancelButtonText: "继续选择店铺",
          type: "warning",
        })
          .then(() => {
            this.$refs.getUnselectedRowKeys.clearSelection();
            this.merchantDialog = false;
          })
          .catch(() => {});
      }
    },
    delMerchantWay(row) {
      this.$confirm("是否继续移除" + row.name + "?", "提示", {
        confirmButtonText: "移除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var arr = this.shopIds.filter((item) => {
            if (item.id !== row.id) {
              return item;
            }
          });
          this.shopIds = arr;
        })
        .catch(() => {});
    },

    //选择商品
    saveGoods() {
      this.goodsDialog = true;
      const list = this.getSelectionList(this.goodsList, this.goodsIds);
      this.$nextTick(() => {
        if (list.length !== 0) {
          list.forEach((item) => {
            this.$refs.GoodsUnselectedRowKeys.toggleRowSelection(item, true);
          });
        }
      });
    },
    getGoodsListWay() {
      this.goodsLoading = true;
      getGoodsList(this.goodsSearch).then((res) => {
        this.goodsLoading = false;
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          return;
        }
        this.goodsList = res.data.list;
        this.goodsTotal = res.data.total;
        const list = this.getSelectionList(this.goodsList, this.goodsIds);
        this.$nextTick(() => {
          if (list.length !== 0) {
            list.forEach((item) => {
              this.$refs.GoodsUnselectedRowKeys.toggleRowSelection(item, true);
            });
          }
        });
      });
    },
    // 选择店铺调用
    goodsSelectionChange(val) {
      this.selectGoodsList = val;
    },
    goodsBeforeClose() {
      if (this.selectGoodsList.length !== 0) {
        this.$confirm("当前选择的有店铺, 您可以选择?", "提示", {
          confirmButtonText: "保存数据关闭弹框",
          cancelButtonText: "不保留数据关闭弹框",
          type: "warning",
        })
          .then(() => {
            this.goodsDialog = false;
          })
          .catch(() => {
            this.$refs.GoodsUnselectedRowKeys.clearSelection();
            this.goodsDialog = false;
          });
      } else {
        this.goodsDialog = false;
      }
    },
    goodsSubmit() {
      if (this.selectGoodsList.length !== 0) {
        this.goodsIds = this.selectGoodsList;
        this.$refs.GoodsUnselectedRowKeys.clearSelection();
        this.goodsDialog = false;
      } else {
        this.$confirm("当前没有选择店铺是否关闭", "提示", {
          confirmButtonText: "关闭",
          cancelButtonText: "继续选择店铺",
          type: "warning",
        })
          .then(() => {
            this.$refs.GoodsUnselectedRowKeys.clearSelection();
            this.goodsDialog = false;
          })
          .catch(() => {});
      }
    },
    delGoodsWay(row) {
      this.$confirm("是否继续移除" + row.name + "?", "提示", {
        confirmButtonText: "移除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var arr = this.goodsIds.filter((item) => {
            if (item.id !== row.id) {
              return item;
            }
          });
          this.goodsIds = arr;
        })
        .catch(() => {});
    },
    submitBtnWay() {
      const p1 = new Promise((req, rej) => {
        this.$refs.basicForm.validate((valid, err) => {
          if (valid) {
            req();
          } else {
            rej({ err: err, name: "会员卡信息" });
          }
        });
      });
      const p2 = new Promise((req, rej) => {
        var num = 0;
        var num1 = 0;
        this.cardTypeList.some((item) => {
          if (item.show) {
            num1++;
            this.$refs[item.form].validate((valid, err) => {
              if (valid) {
                num++;
              } else {
                rej({ err: err, name: item.label });
                return true;
              }
            });
          }
        });
        this.$nextTick(() => {
          if (num1 == num) {
            req();
          }
        });
      });
      Promise.all([p1, p2])
        .then(() => {
          if (this.basicForm.goods_type == 3) {
            var arr = [];
            this.shopIds.forEach((item) => {
              arr.push(item.id);
            });
            this.basicForm.relevancy_id = arr.toString();
          } else if (this.basicForm.goods_type == 4) {
            var arr = [];
            this.goodsIds.forEach((item) => {
              arr.push(item.id);
            });
            this.basicForm.relevancy_id = arr.toString();
          } else {
            this.basicForm.relevancy_id = "";
          }
          console.log(this.basicForm);
          var obj = {
            ...this.basicForm,
            day: this.dayFrom.card_price ? JSON.stringify(this.dayFrom) : "",
            week: this.weekFrom.card_price ? JSON.stringify(this.weekFrom) : "",
            month: this.monthFrom.card_price
              ? JSON.stringify(this.monthFrom)
              : "",
            season: this.seasonFrom.card_price
              ? JSON.stringify(this.seasonFrom)
              : "",
            year: this.yearFrom.card_price ? JSON.stringify(this.yearFrom) : "",
          };
          if (this.id) {
            obj.id = this.id;
          }
          this.loading = true;
          SaveClubCard(obj).then((res) => {
            this.loading = false;
            if (res.code !== 200 || res.status !== 1) {
              this.$messages.error(res.msg);
              return;
            }
            this.$messages.success(res.msg);
            this.gobackWay();
          });
        })
        .catch((err) => {
          var obj = err;
          const errObj = err.err;
          for (var key in errObj) {
            this.$messages.error(errObj[key][0].message);
            this.activeName = obj.name;
            this.handleClick({ name: this.activeName });
            break;
          }
        });
    },
    getInfoWay() {
      this.basicForm.card_name = this.backupsForm.card_name;
      this.imageFile = { url: this.backupsForm.image };
      this.basicForm.image = this.backupsForm.image;
      this.basicForm.card_colour = this.backupsForm.card_colour;
      this.basicForm.font_colour = this.backupsForm.font_colour;
      this.cardTypeEchoWay(this.backupsForm.cardList);
      this.basicForm.discount_rate = this.backupsForm.discount_rate;
      this.basicForm.goods_type = this.backupsForm.goods_type;
      this.basicForm.is_pinkage = this.backupsForm.is_pinkage;
      this.basicForm.sort = this.backupsForm.sort;
      this.basicForm.explain = this.backupsForm.explain;
      if (this.backupsForm.goods_type == 3) {
        this.shopIds = [...this.backupsForm.relevancy_list];
      } else if (this.backupsForm.goods_type == 4) {
        this.goodsIds = [...this.backupsForm.relevancy_list];
      }
      this.contentBool = true;
      this.loading = false;
    },
    cardTypeEchoWay(arr) {
      this.cardType = [];
      arr.forEach((item) => {
        this.cardType.push(String(item.type));
      });
      this.cardTypeWay(this.cardType);
      this.$nextTick(() => {
        this.cardTypeList.forEach((item) => {
          if (item.show) {
            arr.forEach((items) => {
              if (item.id == items.type) {
                this[item.form].card_price = Number(items.card_price);
                this[item.form].line_price = Number(items.line_price);
                this[item.form].card_status = Number(items.card_status);
                this[item.form].send_balance = Number(items.send_balance);
                this[item.form].send_integral = Number(items.send_integral);
                this[item.form].send_coupon_summary = Number(
                  items.send_coupon_summary
                );
                this[item.form].send_award_num = Number(items.send_award_num);
                this[item.form].sort = Number(items.sort);
              }
            });
          }
        });
      });
    },
    getSelectionList(arr, arr1) {
      let list = [];
      //遍历表格的数据，再遍历需要在表格中反显的数据，两者的id一致
      arr.forEach((item) => {
        arr1.forEach((val) => {
          if (val.id === item.id) {
            // 把判断出来的默认表格数据push到创建的数组中
            list.push(item);
          }
        });
      });
      return list;
    },
  },
};
</script>

<style>
.vip .el-scrollbar__wrap {
  overflow-x: hidden !important;
}
.vip .el-carousel__arrow--right {
  display: none !important;
}
.vip .el-carousel__arrow--left {
  display: none !important;
}
.vip .el-upload--picture-card {
  width: 90px !important;
  height: 90px !important;
  line-height: 90px;
}

.vip .el-upload-list--picture-card .el-upload-list__item-actions {
  width: 90px !important;
  height: 90px !important;
}

.vip .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 90px !important;
  height: 90px !important;
}

.vip .el-upload-list--picture-card .el-upload-list__item {
  width: 90px !important;
  height: 90px !important;
}
</style>